<template>
	<view class="container">
		<u-search :showAction="true" actionText="搜索" :animation="true" :clearabled="true" placeholder="请输入姓名或学号"
			v-model="keyword" @custom="performSearch()" @clear="onClear()"></u-search>
		<view class="action-buttons">
			<u-button type="primary" @click="formDialog=true">新增学生</u-button>
			<u-button type="primary" @click="importDialog=true">数据导入</u-button>
		</view>
		<!-- 弹出层 -->
		<u-popup :show="importDialog" mode="center" border-radius="10">
			<view style="padding: 20px; width: 80%; max-width: 400px; background-color: #fff;">
				<u--form labelPosition="left" :model="importLink" ref="importForm">
					<u-form-item label="链接" borderBottom>
						<u--input v-model="importLink.url" placeholder="请输入链接"></u--input>
					</u-form-item>
					<u-form-item label="班级" borderBottom>
						<u--input v-model="importLink.class" placeholder="请输入班级"></u--input>
					</u-form-item>
				</u--form>
				<div style="display: flex; justify-content: space-between;">
					<u-button type="primary" text="确认" @click="confirmImport()"
						style="flex: 1; margin-right: 10px;"></u-button>
					<u-button color="#c8c9cc" text="取消" @click="importDialog=false" style="flex: 1;"></u-button>
				</div>
			</view>
		</u-popup>
		<!-- 表格展示 -->
		<uni-table ref="table" border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th width="50" align="center">学号</uni-th>
				<uni-th width="100" align="center">姓名</uni-th>
				<uni-th width="50" align="center">班级</uni-th>
				<uni-th width="150" align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(student, index) in students" :key="index">
				<uni-td align="center">{{ student.student_id }}</uni-td>
				<uni-td align="center">
					<view class="name">{{ student.name }}</view>
				</uni-td>
				<uni-td align="center">{{ student.class }}</uni-td>
				<uni-td>
					<view class="uni-group">
						<button class="uni-button" size="mini" type="primary"
							@click="getOne(student.student_id)">修改</button>
						<button class="uni-button" size="mini" type="warn"
							@click="showDeleteConfirm(student.student_id)">删除</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<u-popup :show="formDialog" :round="10" mode="center" style="width: 80%; max-width: 500px; padding: 20px;">
			<!-- 表单组件 -->
			<u--form labelPosition="left" :model="studenInfo" :rules="rules" ref="uForm"
				style="padding: 20px; background-color: #fff; border-radius: 10px;">
				<u-form-item label="姓名" prop="name" borderBottom style="margin-bottom: 20px;">
					<u--input v-model="studenInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item v-if="insertDialog" label="学号" prop="student_id" borderBottom style="margin-bottom: 20px;">
					<u--input v-model="studenInfo.student_id" border="none"></u--input>
				</u-form-item>
				<u-form-item v-else label="学号" prop="student_id" borderBottom style="margin-bottom: 20px;">
					<u--input v-model="studenInfo.student_id" border="none" disabled></u--input>
				</u-form-item>
				<u-form-item label="班级" prop="class" borderBottom style="margin-bottom: 20px;">
					<u--input v-model="studenInfo.class" border="none"></u--input>
				</u-form-item>
				<div style="display: flex; justify-content: space-between;">
					<u-button v-if="insertDialog" type="primary" text="提交" @click="addStudent()"
						style="flex: 1; margin-right: 10px;"></u-button>
					<u-button v-else type="success" text="修改" @click="editStudent()"
						style="flex: 1; margin-right: 10px;"></u-button>
					<u-button color="#c8c9cc" text="取消" @click="formDialog=false" style="flex: 1;"></u-button>
				</div>
			</u--form>
		</u-popup>
	</view>
</template>
<script>
	import * as XLSX from 'xlsx'; // 引入 xlsx 库
	export default {
		data() {
			return {
				keyword: '',
				students: [], // 学生列表
				importDialog: false, //导入
				importLink: {
					url: '',
					class: '18'
				},
				// 数据总量
				total: 0,
				loading: false,
				// 表单组件
				formDialog: false,
				insertDialog: true,
				studenInfo: {
					name: '',
					student_id: '',
					class: ''
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名（汉字）',
						trigger: ['blur', 'change']
					},
					'student_id': {
						type: 'number',
						required: true,
						message: '请填写学号（数字）',
						trigger: ['blur', 'change']
					},
					'class': {
						type: 'string',
						required: true,
						message: '请填写班级',
						trigger: ['blur', 'change']
					},
				},

			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			confirmImport() {
				console.log('正在访问:', this.importLink.url);
				// 访问链接获取数据的逻辑
				this.fetchAndParseExcel(this.importLink.url);
				this.importDialog = false
			},
			fetchAndParseExcel(url) {
				// 使用 uni.request 下载文件
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer', // 确保以二进制格式接收文件
					success: (res) => {
						if (res.statusCode === 200) {
							// 下载成功，开始解析文件
							this.parseExcel(res.data);
						} else {
							console.error('文件下载失败:', res.statusCode);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					},
				});
			},
			// 解析 Excel 数据
			parseExcel(data) {
				try {
					// 将二进制数据转换为工作簿对象
					const workbook = XLSX.read(data, {
						type: 'array'
					});

					// 选择要解析的工作表（假设是第一个工作表）
					const worksheet = workbook.Sheets[workbook.SheetNames[0]];

					// 将工作表转换为 JSON 格式（数组）
					const jsonData = XLSX.utils.sheet_to_json(worksheet, {
						header: 1
					}); // header: 1 表示使用第一行作为列标题

					// 将原始数据转换为目标格式
					let students = [];
					students = jsonData.slice(1).map(row => {
						return {
							name: row[0], // 姓名
							student_id: row[1], // 座号（学号）
							class: this.importLink.class, // 班级
						};
					});
					// 插入数据时显示加载图标
					console.log('===转换后的学生数据===:' + students);
					students.forEach(item => {
						this.$dbUtils.addTabItem('testDb', 'students', item);
					});
					uni.showToast({
						title: '导入成功',
						icon: 'success'
					});
					this.getData()
				} catch (error) {
					console.error('Excel 解析失败:', error);
				}
			},
			// 清空时刷新
			onClear() {
				console.log('搜索框已清空');
				// 清空时执行查询的方法
				this.getData();
			},
			// 模拟搜索
			performSearch() {
				// 模拟搜索逻辑
				const value = this.keyword;
				if (value) {
					console.log(`正在搜索关键词: ${value}`);
					// this.$dbUtils.selectDataLike('testDb', 'students', 'name', value)
					// 	.then(results => {
					// 		console.log("模糊查询成功:", results);
					// 		this.students = results
					// 	})
					// 	.catch(error => {
					// 		console.error("模糊查询失败:", error);
					// 	});
					// 姓名。学号一起模糊查询
					this.$dbUtils.selectXmXhDataLike('testDb', 'students', ['name', 'student_id'], value)
						.then(results => {
							console.log("模糊查询成功:", results);
							this.students = results
						})
						.catch(error => {
							console.error("模糊查询失败:", error);
						});
					// 实际应用中，你可能会调用API或执行其他操作来完成搜索
					// 假设我们要查找名字中包含"小明"的所有学生
					// selectDataLike('testDb', 'students', 'name', '小明')
					//     .then(results => {
					//         console.log("模糊查询成功:", results);
					//         // 在这里处理查询结果
					//     })
					//     .catch(error => {
					//         console.error("模糊查询失败:", error);
					//     });

					// // 如果需要添加更多的查询条件
					// selectDataLike('testDb', 'students', 'name', '小明', { class: '一班' }, 'student_id', 'asc')
					//     .then(results => {
					//         console.log("带有额外条件和排序的模糊查询成功:", results);
					//         // 在这里处理查询结果
					//     })
					//     .catch(error => {
					//         console.error("带有额外条件和排序的模糊查询失败:", error);
					//     });
				} else {
					this.getData();
					console.warn('请输入搜索关键词');
				}
			},
			// 新增数据
			addStudent() {
				this.$refs.uForm.validate().then(res => {
					console.log('验证通过:', res);
					// 执行添加学生的逻辑
					this.$dbUtils.addTabItem('testDb', 'students', this.studenInfo)
						.then(response => {
							console.log("插入成功:", response);
							uni.showToast({
								title: '插入成功',
								icon: 'success'
							});
							this.resetForm()
						})
						.catch(error => {
							console.error("插入失败:", error);
							uni.showToast({
								title: '插入失败，请检查输入信息',
								icon: 'none'
							});
						});
				}).catch(errors => {
					console.error('验证失败:', errors);
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
				});
			},
			// 获取数据
			getData() {
				this.$dbUtils.selectDataListSpecial('testDb', 'students', {})
					.then(results => {
						console.log("查询成功:", results);
						// 在这里处理查询结果
						this.students = results
					})
					.catch(error => {
						console.error("查询失败:", error);
					});
			},
			// 获取单个数据
			getOne(studentId) {
				this.$dbUtils.selectDataList('testDb', 'students', {
						student_id: studentId
					})
					.then(results => {
						console.log("查询成功:", results);
						// 在这里处理查询结果
						this.studenInfo = results[0];
						this.formDialog = true;
						this.insertDialog = false
					})
					.catch(error => {
						console.error("查询失败:", error);
					});
			},
			editStudent() {
				// 验证表单
				this.$refs.uForm.validate().then(res => {
					console.log('验证通过:', res);
					// 调用更新数据库的方法
					this.$dbUtils.updateSQL('testDb', 'students', this.studenInfo, 'student_id',
							this.studenInfo.student_id)
						.then(response => {
							console.log("更新成功:", response);
							uni.showToast({
								title: '更新成功',
								icon: 'success'
							});
							this.resetForm();
						})
						.catch(error => {
							console.error("更新失败:", error);
							uni.showToast({
								title: '更新失败，请检查输入信息',
								icon: 'none'
							});
						});
				}).catch(errors => {
					console.error('验证失败:', errors);
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
				});
			},
			resetForm() {
				// 重置studenInfo对象为初始状态
				this.studenInfo = {
					name: '',
					student_id: '',
					class: ''
				};
				this.insertDialog = true; //插入输入框重置
				this.formDialog = false; // 关闭编辑对话框							
				this.getData(); // 刷新学生列表
			},
			showDeleteConfirm(studentId) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该学生信息吗？',
					success: (res) => {
						if (res.confirm) {
							this.deleteData(studentId);
						} else if (res.cancel) {
							console.log('用户点击了取消');
						}
					}
				});
			},
			// 删除数据
			deleteData(studentId) {
				this.$dbUtils.delData('testDb', 'students', {
						student_id: studentId
					})
					.then(response => {
						console.log("删除成功:", response);
						// 成功后可以刷新列表或做其他操作
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						// 假设你有一个方法来重新加载学生列表
						this.getData();
					})
					.catch(error => {
						console.error("删除失败:", error);
						uni.showToast({
							title: '删除失败，请稍后再试',
							icon: 'none'
						});
					});
			}

		}
	};
</script>
<style scoped>
	.container {
		padding: 20rpx;
	}

	.action-buttons {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		/* 默认是row，可省略 */
		justify-content: space-between;
		/* 根据需要调整对齐方式 */
		gap: 10px;
		/* 按钮之间的间距 */
	}

	.student-table {
		margin-top: 20rpx;
	}

	.form-content {
		padding: 20rpx;
	}

	.delete-content {
		text-align: center;
		padding: 20rpx;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>